<template>
  <div>
    <el-card>
      <div class="explain">说明：目前支持学科和关键字条件筛选</div>
      <el-button
        type="success"
        class="NewQuestions"
        @click="$router.push('/questions/new')"
      ><i class="el-icon-edit"></i>新增试题
      </el-button>
      <el-form
        class="form"
        ref="refQuestions"
        :model="from"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="学科"
              label-width="70px"
            >
              <el-select
                style="width:95%"
                placeholder="请选择"
                v-model="from.subjectID"
                @change="simple2Api($event)"
              >
                <el-option
                  v-for="item in subject"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="二级目录"
              label-width="70px"
            >
              <el-select
                style="width:95%"
                placeholder="请选择"
                v-model="from.catalogID"
              >
                <el-option
                  v-for="item in secondLevel"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="标签"
              label-width="70px"
            >
              <el-select
                style="width:95%"
                placeholder="请选择"
                v-model="from.tags"
              >
                <el-option
                  v-for="item in tagboards"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="关键字"
              label-width="70px"
            >
              <el-input
                style="width:95%"
                placeholder="请选择"
                v-model="from.keyword"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            class="col"
          >
            <el-form-item
              label="题目类型"
              label-width="70px"
            >
              <el-select
                style="width:95%"
                placeholder="请选择"
                v-model="from.questionType"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.label"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            class="col"
          >
            <el-form-item
              label="难度"
              label-width="70px"
            >
              <el-select
                style="width:95%"
                placeholder="请选择"
                v-model="from.difficulty"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.label"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            class="col"
          >
            <el-form-item
              label="方向"
              label-width="70px"
            >
              <el-select
                style="width:95%"
                placeholder="请选择"
                v-model="from.direction"
              >
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            class="col"
          >
            <el-form-item
              label="录入人"
              label-width="70px"
            >
              <el-select
                style="width:95%"
                placeholder="请选择"
                v-model="from.creatorID"
              >
                <el-option
                  label="超级管路员"
                  value="shanghai"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="题目备注"
              label-width="70px"
            >
              <el-input
                style="width:95%"
                placeholder="请选择"
                v-model="from.remarks"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="企业名称"
              label-width="70px"
            >
              <el-input
                style="width:95%"
                placeholder="请选择"
                v-model="from.shortName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="城市"
              label-width="70px"
            >
              <el-select
                style="width:46%"
                placeholder="请选择"
                v-model="from.city"
                @change="handleProvince($event)"
              >
                <el-option
                  v-for="item in citySelect.province"
                  :key="item"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
              &nbsp;
              <el-select
                style="width:46%"
                placeholder="请选择"
                v-model="from.county"
              >
                <el-option
                  v-for="item in citySelect.cityDate"
                  :key="item"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              type="primary"
              class="el-button el-button--default el-button--small"
              style="float: right; margin-top: 10px;"
              @click="searchFrom"
            >搜索</el-button>
            <el-button
              class="el-button el-button--default el-button--small"
              style="float: right; margin-top: 10px;margin-right: 10px;"
              @click="eliminate"
            >清除</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-alert
        :title="title"
        show-icon
        :closable="false"
      >
      </el-alert>
      <br>
      <el-table
        :data="tableData"
        style="width: 100%"
        class="th"
      >
        <el-table-column
          label="试题编号"
          min-width="130"
          prop="number"
        >
        </el-table-column>
        <el-table-column
          label="学科"
          width="100"
          prop="subject"
        >
        </el-table-column>
        <el-table-column
          label="目录"
          width="100"
          prop="catalog"
        >
        </el-table-column>
        <el-table-column
          label="题型"
          width="100"
          prop="questionType"
          :formatter="formaterData"
        >
        </el-table-column>
        <el-table-column
          label="题干"
          width="250"
          prop="question"
          :formatter="formaterData4"
        >
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="180"
          prop="addDate"
          :formatter="formaterData3"
        >
        </el-table-column>
        <el-table-column
          label="难度"
          width="100"
          prop="difficulty"
          :formatter="formaterData2"
        >
        </el-table-column>
        <el-table-column
          label="录入人"
          width="150"
          prop="creator"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="180"
        >
          <template #default="{row}">
            <el-button
              class=" el-button--primary el-button--small is-plain is-circle"
              @click="preview(row)"
            ><i
                class="el-icon-view"
                title="预览"
              ></i></el-button>
            <el-button
              class=" el-button--success el-button--small is-plain is-circle"
              @click="$router.push({path:`/questions/new`,query:{id:row.id}})"
            ><i
                class="el-icon-edit"
                title="修改"
              ></i></el-button>
            <el-button
              class=" el-button--danger el-button--small is-plain is-circle"
              title="删除"
              @click="delFrom(row.id)"
            ><i class="el-icon-delete"></i></el-button>
            <el-button
              class=" el-button--warning el-button--small is-plain is-circle"
              @click="AddChoice(row.id)"
            ><i
                class="el-icon-check"
                title="加入精选"
              ></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page="page"
        :page-size="pagesize"
        :total="total"
        :page-sizes="[5,10,15,20]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <questionFunction
        :showDialog.sync="showDialog"
        :pre-view1.sync="preView1"
        :oPTions="oPTions"
      >
      </questionFunction>
    </el-card>
  </div>

</template>

<script>
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { simple as simple1 } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
import { simple as simple2 } from '@/api/hmmm/directorys'
import { provinces, citys } from '@/api/hmmm/citys'
import questionFunction from './questionsFunction.vue'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { parseTime } from '@/utils/index'
export default {
  components: { questionFunction },
  data () {
    return {
      total: 0, // 一共多少条
      page: 1, // 第几页
      pagesize: 5, // 有多少条
      tableData: [],
      title: '',
      direction: direction, // 方向
      questionType: questionType, // 题型
      difficulty: difficulty, // 难度
      subject: [], // 学科
      secondLevel: [] || '', // 二级目录
      tagboards: [] || '', // 标签
      citySelect: {
        province: [],
        cityDate: []
      },
      showDialog: false,
      // id: subject1.value,
      from: {},
      preView1: {}, // 预览数据
      oPTions: [] // abcd
    }
  },
  computed: {},
  created () {
    this.listApi()
    this.simpleApi()
    this.getCityData()
  },
  methods: {
    async listApi (val) {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        ...val
      })
      // console.log(data)
      this.tableData = data.items
      // this.tableData.difficulty
      this.title = `总共有${data.counts}条`
      this.total = data.counts
      // this.from.subject1 = this.tableData.subject
      // console.log(this.tableData)
    },

    // 获取学科
    async simpleApi () {
      const { data } = await simple()
      // console.log(data)
      this.subject = data
    },
    // 获取目录
    async simple2Api (e) {
      // const id = res2[0].value
      const { data } = await simple2({ subjectID: e })
      // const res = data.forEach((item) => (item.value = this.subjuect1.value))
      // console.log(data)
      this.secondLevel = data
      this.list1Api(e)
    },
    // 获取标签
    async list1Api (e) {
      const { data } = await simple1({ subjectID: e })
      // console.log(data)
      this.labels = data
      // this.subject = data
    },
    // 获取市
    getCityData: function () {
      this.citySelect.province = provinces()
      this.from = {}
    },
    // 选省获取到市
    handleProvince: function (e) {
      // console.log(e)
      this.citySelect.cityDate = citys(e)
    },
    // 点击搜索按钮
    searchFrom () {
      this.listApi(this.from)
      // console.log(this.from)
    },
    // 点击清除按钮
    eliminate () {
      this.from = {}
      this.listApi()
    },
    // 点击预览

    // 点击删除
    delFrom (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          // console.log(id)
          await remove({ id: id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }
          this.listApi()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 加入精选
    AddChoice (id) {
      // console.log(id)
      this.$confirm('确定要加入精选吗', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await choiceAdd({ id: id, choiceState: 1 })
          this.$message({
            type: 'success',
            message: '加入成功!'
          })
          this.listApi()
        })
        .catch(() => {})
    },
    // 处理题型
    formaterData (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      if (cellValue === '1') {
        return '单选'
      }
      if (cellValue === '2') {
        return '多选'
      }
      if (cellValue === '3') {
        return '简答'
      }
      // const res = questionType.find((item) => item.value === +cellValue)
      // // this.tableData.questionType = res.label
      // // console.log(res)
      // return res.label
    },
    // 处理难度
    formaterData2 (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // console.log(row, column, cellValue, index)
      if (cellValue === '1') {
        return '简单'
      }
      if (cellValue === '2') {
        return '一般'
      }
      if (cellValue === '3') {
        return '困难'
      }
      // const res = difficulty.find((item) => item.value === +cellValue)
      // // console.log(res, 111)
      // return res.label
    },
    // 处理时间
    formaterData3 (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // const res = difficulty.find((item) => item.value === +cellValue)
      // return res.label
      return parseTime(cellValue, '')
    },
    // 利用正则表达式处理标签
    formaterData4 (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // const res = difficulty.find((item) => item.value === +cellValue)
      // return res.label
      return cellValue.replace(/<[^>]+>/g, '')
    },
    handleSizeChange (val) {
      // console.log(val)
      this.pagesize = val
      this.listApi()
    },
    handleCurrentChange (val) {
      this.page = val
      this.listApi()
    },
    async preview (row) {
      // 获取详细信息
      const {
        data: { options }
      } = await detail({ id: row.id })
      // console.log(options)
      this.showDialog = true
      this.preView1 = row
      this.oPTions = options
      // console.log(data)

      // console.log(row)

      // this.preView1.difficulty = difficulty.filer(
      //   (item) => item.value === Number(row.difficulty)
      // )
      // this.preView1.questionType = questionType.find(
      //   (item) => item.value === Number(row.questionType)
      // ).label
      this.preView1.question = this.preView1.question.replace(/<[^>]+>/g, '')
      this.preView1.answer = this.preView1.answer.replace(/<[^>]+>/g, '')
      // this.preView1.
      // console.log(row)
      // console.log(this.preView1)
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-table th {
  background-color: #fafafa;
  border-bottom: 2px solid #e8e8e8 !important;
}
.explain {
  color: darksalmon;
  font-size: 10px;
}
.NewQuestions {
  float: right;
}
.form {
  margin-top: 50px;
  margin-left: 10px;
  font-size: 700;
  margin-bottom: 20px;
  font-size: 700;
  .col {
    display: block;
    margin: 0, 10px;
  }
}
.pagination {
  float: right;
}
</style>
